_package("ball.page");

_import("caf.ui.Page");

_class("HomePage", Page, function(){
	this._init = function(){
		_super._init.call(this);
	};
	this.create = function(parent){
		var obj = this.createTplElement(parent, "home.xml");
		this.init(obj);
		return obj;
	};
	this.init = function(){
		_super.init.apply(this, arguments);
		this.initComponents();
		this.initActionElements();
		this.doBallGame();
	};
	
	
	this.doBallGame = function(){
		var _self = this;
		
		var x = 150;
		var y = 150;
		var dx = 1;
		var dy = 2;
		var WIDTH;
		var HEIGHT;
		var canvasObj;
		var ctx;
		var paddlex;
		var paddleh;
		var paddlew;
		var rightDown = false;
		var leftDown = false;
		var ballr = 15;
		var rowcolors = ["#FD7320", "#815030", "#2FAB05", "#5B60FF", "#F47DFB"];
		var paddlecolor = "#535353";
		var ballcolor = "#00458A";
		var backcolor = "#000000";
		
		function init_paddle() {
		  paddlex = WIDTH / 2;
		  paddleh = 20;
		  paddlew = 115;
		}

		function ballInit() {
		  canvasObj = $('#canvas');
		  ctx = $('#canvas')[0].getContext("2d");
		  WIDTH = $("#canvas").width();
		  HEIGHT = $("#canvas").height();
		  return setInterval(draw, 7);
		}

		function circle(x,y,r) {
		  ctx.beginPath();
		  ctx.arc(x, y, r, 0, Math.PI*2, true);
		  ctx.closePath();
		  ctx.fill();
		}

		function rect(x,y,w,h) {
		  ctx.beginPath();
		  ctx.rect(x,y,w,h);
		  ctx.closePath();
		  ctx.fill();
		}

		function clear() {
		  ctx.clearRect(0, 0, WIDTH, HEIGHT);
		}


		function draw() {
			ctx.fillStyle = backcolor;
			clear();
			ctx.fillStyle = ballcolor;

			circle(x, y, ballr);

			if (rightDown) paddlex += 3;
			else if (leftDown) paddlex -= 3;
			ctx.fillStyle = paddlecolor;
			rect(paddlex, HEIGHT-paddleh, paddlew, paddleh);

			drawbricks();


			rowheight = BRICKHEIGHT + PADDING;
			colwidth = BRICKWIDTH + PADDING;
			row = Math.floor(y/rowheight);
			col = Math.floor(x/colwidth);

			if (y < NROWS * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) {
				dy = -dy;
				bricks[row][col] = 0;
			}

			if (x + dx + ballr > WIDTH || x + dx - ballr < 0)
				dx = -dx;

			if (y + dy - ballr < 0)
				dy = -dy;
			else if (y + dy + ballr > HEIGHT - paddleh) {
				if (x > paddlex && x < paddlex + paddlew) {
					dx = 8 * ((x-(paddlex+paddlew/2))/paddlew);
					dy = -dy;
				}
				else if (y + dy + ballr > HEIGHT){
					_self._app.dlgInvoke("msgbox", _self._app, {  
						'title' : '游戏结束',  
						'msg' : '点击重新开始。'  
					}, _self, 'message_clicked');
					
					
					clearInterval(intervalId);

				}
			}

			x += dx;
			y += dy;
		}

		var bricks;
		var NROWS;
		var NCOLS;
		var BRICKWIDTH;
		var BRICKHEIGHT;
		var PADDING;

		
		function drawbricks() {
		  for (i=0; i < NROWS; i++) {
			ctx.fillStyle = rowcolors[i];
			for (j=0; j < NCOLS; j++) {
			  if (bricks[i][j] == 1) {
				rect((j * (BRICKWIDTH + PADDING)) + PADDING, 
					 (i * (BRICKHEIGHT + PADDING)) + PADDING,
					 BRICKWIDTH, BRICKHEIGHT);
			  }
			}
		  }
		}
		
		function initbricks() {
		  NROWS = 5;
		  NCOLS = 5;
		  BRICKWIDTH = (WIDTH/NCOLS) - 1;
		  BRICKHEIGHT = 25;
		  PADDING = 2;

		  bricks = new Array(NROWS);
		  for (i=0; i < NROWS; i++) {
			bricks[i] = new Array(NCOLS);
			for (j=0; j < NCOLS; j++) {
			  bricks[i][j] = 1;
			}
		  }
		}

		var intervalId;
		intervalId = ballInit();
		initbricks();
		init_paddle();
		
		
		// 绑定事件
		var canvasMinX;
		var canvasMaxX;
	    canvasMinX = $("#canvas").offset().left;
	    canvasMaxX = canvasMinX + WIDTH;
		// touch事件教程： http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html
		function onTouchMove(evt) {
			var touch = event.touches[0];
			if (touch.pageX > canvasMinX && touch.pageX < canvasMaxX) {
				paddlex = touch.pageX - canvasMinX;
			}
		}
		$("#ctl-bar")[0].addEventListener("touchmove", onTouchMove, false);
	};
	
	this.message_clicked = function(sender, act) {  
		switch(act) {  
			case 'dlg_ok':
				this.doBallGame();
				break;  
			default:  
				break;  
		};  
	};

	this.dispose = function(){
		_super.dispose.apply(this);
	};
	
	
	
});